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Abstract 

The graphical user interface for a workstation application is often composed 
of working areas containing text or drawings surrounded by controls like but- 
tons, menus, or sliders. Users must constantly move the mouse between the 
work areas and the controls. Previous methods to decrease this motion have 
relied on keyboard shortcuts or popup menus. This paper demonstrates an al- 
ternative, transparent controls, that allows the entire display surface to be used 
as a working area, with the controls arranged anywhere on the working area. 
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1. Introduction 



A common interactive application allows one to use a mouse (or other pointing device) to 
create and edit drawings. A window produced by one such application, idraw, is shown in figure 
1. The window is broken up into a number of fixed areas: the drawing area, drawing controls 
such as buttons, sliders, and pull-down menus, and indicators showing the current file name and 
text font. 
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Figure 1: A conventional interactive application 

The user can waste significant time moving the mouse between the drawing area and the con- 
trols. Some applications solve this problem by allowing sequences of one or more keystrokes, 
i.e. keyboard shortcuts, as a shorthand way to invoke a mouse selected operation. This can im- 
prove productivity, but the user must remember these sequences and either move one hand be- 
tween the mouse and the keyboard, or run the application with one hand on the mouse and one 
on the keyboard. 

Another solution is to use popup menus to control the application. Instead of moving the 
mouse to the control region of the window, depressing a combination of mouse buttons and/or 
keyboard keys causes a menu to appear under the mouse's cursor, obscuring part of the work 
area. Again, this requires the user to remember key sequences and possibly use two hands. 

Finally, some applications support tear-off menus that allow frequently used menus to be per- 
manently displayed. While this reduces mouse motion and keystrokes, these menus are like pop- 
up or pull-down menus in that they obscure parts of the work area when visible. 

All these solutions present an application designer with a dilemma. If the controls are separate 
from the work area, then there will be a lot of back-and-forth mouse motion. If the controls are 
inter-mixed with the work area, then the work area will be obscured. 
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2. The Virtues of Transparency 

One way to avoid obstructing the work area is to make overlapping objects transparent. That 
is, the object under the overlapping object continues to be visible and not distorted. In order to 
minimize visual distraction, the transparency of the overlapping object can be varied according 
to the user's attention by watching the location of the mouse's cursor. When the mouse enters 
the controls, they become more visible, and when it leaves the controls, they become less visible. 

In order to demonstrate these ideas, I constructed several sample applications. Figure 2 shows 
a portion of a sample window, with a transparent control panel overlaying a drawing. When the 
mouse moves into the control panel (Figure 3), the panel becomes more visible by darkening the 
letters, dimming portions of the drawing that are under the control panel, and outlining the but- 
tons. The user can reposition the control panel by using the mouse to drag its "grab bar" (Figure 
4). 




Figure 2: Mouse outside the transparent control panel 

Since the control panel is transparent, changes that the application makes to the drawing under 
the panel become visible as soon as they are made. 

3. Implementing Transparency 

Transparency is easily implemented in the X window system [3] by drawing with stipples, a 
bitmap that does additional clipping on the drawn image. Figure 5 shows a checkerboard stipple 
pattern and the effect of drawing text with and without it. 

When the mouse is outside the control panel, the panel is drawn dimly using a stipple that lets 
half the pixels in the panel's image appear in the window (Figures 2, 6). 

When the mouse is moved into the control panel, the region under the control panel is 
lightened by filling it with the window's background color using a stipple that draws half the 
pixels. Then, the control panel text and button outlines are drawn solidly, without using a stipple 
pattern (Figures 3, 7). 
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Figure 3: Mouse inside the transparent control panel 
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Figure 4: Control panel moved by dragging "grab bar" 

The examples in this paper show that transparent control panels are effective on monochrome 
displays. What they can't demonstrate is that transparency is even more effective with color 
displays, using some of the design ideas used for topographic maps [4]. By choosing a dark 
color for the control panel and lighter colors with similar brightness for the application drawing, 
one can eliminate filling the area under the control panel with the stippled background color. 

I investigated these ideas using the structured graphics system ezd [2]. Implementation was 
straightforward as ezd does not assume that an object completely obstructs the objects beneath it. 
Unfortunately, the X window system does assume that when window A obstructs window B, 
nothing in the portion of B under A is visible, i.e. windows are opaque. As the X toolkit [1], Xt, 
and widget libraries use subwindows and thus depend upon X's model for obstructing windows, 
it would not be easy to add transparent controls to conventional widget sets. 
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Text drawn without a stipple pattern 




Figure 5: "Drawing with a stipple pattern" 




Figure 6: Detail with mouse outside the transparent control panel 



4. Conclusion 

Transparent 2-D graphics are a useful new way to add controls to application's work areas. 
The result is less mouse motion and a larger work area. Sample implementations have shown 
that stippling is a visually effective and efficient way to implement transparency. One obstacle to 
wider use of transparency is existing window system's models for how windows obstruct each 
other. 
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Figure 7: Detail with mouse inside the transparent control panel 
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